<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>旋转魔方相册</title>
    <!-- <link rel="stylesheet" href="styles.css"> -->
    <style>
      /* styles.css */
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        perspective: 1000px;
      }

      .cube-container {
        width: 200px;
        height: 200px;
        position: relative;
        transform-style: preserve-3d;
        animation: rotateCube 10s infinite linear;
      }

      .cube {
        width: 100%;
        height: 100%;
        position: absolute;
        transform-style: preserve-3d;
      }

      .face {
        position: absolute;
        width: 200px;
        height: 200px;
        background: #fff;
        border: 1px solid #ccc;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 40px;
        font-weight: bold;
        backface-visibility: hidden;
      }

      .front {
        transform: translateZ(100px);
      }
      .back {
        transform: rotateY(180deg) translateZ(100px);
      }
      .right {
        transform: rotateY(90deg) translateZ(100px);
      }
      .left {
        transform: rotateY(-90deg) translateZ(100px);
      }
      .top {
        transform: rotateX(90deg) translateZ(100px);
      }
      .bottom {
        transform: rotateX(-90deg) translateZ(100px);
      }

      @keyframes rotateCube {
        from {
          transform: rotateX(0deg) rotateY(0deg);
        }
        to {
          transform: rotateX(360deg) rotateY(360deg);
        }
      }
    </style>
  </head>
  <body>
    <div class="cube-container">
      <div class="cube">
        <div class="face front">1</div>
        <div class="face back">2</div>
        <div class="face right">3</div>
        <div class="face left">4</div>
        <div class="face top">5</div>
        <div class="face bottom">6</div>
      </div>
    </div>
    <button id="rotateBtn" style="visibility: hidden;">旋转</button>

    <script>
      // script.js
      document
        .getElementById("rotateBtn")
        .addEventListener("click", function () {
          var cubeContainer = document.querySelector(".cube-container");
          var currentRotation = parseInt(
            cubeContainer.style.transform || "0",
            10
          );
          cubeContainer.style.transform = `rotateX(${
            (currentRotation + 90) % 360
          }deg) rotateY(${(currentRotation + 90) % 360}deg)`;
        });
    </script>
  </body>
</html>
